iT邦幫忙

2022 iThome 鐵人賽

DAY 27
0
Modern Web

前端技術研究系列 第 27

useMemo - React 提升效能系列(二)

  • 分享至 

  • xImage
  •  

講了一推提升效能的 api,那是不是要來認識一下 useMemo 呢。
前面提到的 React.memo & React.PureComponent 都是針對子元件 re-render 的功能。
而 useMemo 是提供給元件一個減少 function 被呼叫次數的 react hook ,每次元件 re-render 時,裡面的 function 也會重新執行一次。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  • useMemo 是回傳一個被記憶的值:memoizedValue
  • computeExpensiveValue(a,b) 是不想每次都被呼叫的複雜計算 function。
  • [a,b]dependencies array,用來觸發這個 useMemo 。與 useEffect 相同
// 沒設定 dependency 時,每次有 state 改變 useMemo 就會執行
const memoizedValue = useMemo(() => computeExpensiveValue(a, b));

// 設定 dependency 為空陣列時,只有載入元件時 useMemo 才會執行
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), []);

上述提到的部分可以在 codepen 來實際操作看看喔。

適用情形:
當function(computeExpensiveValue()) 過於複雜時,如果只是個簡單的小計算,其實就沒什麼需要使用 useMemo 來提升效能的必要了。

資料來源:
https://medium.com/手寫筆記/react-optimize-performance-using-memo-usecallback-usememo-a76b6b272df3


上一篇
來認識 React.PureComponent 吧 - React 提升效能系列(一)
下一篇
useCallback - React 提升效能系列(三)
系列文
前端技術研究30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言